import React, { useContext, useEffect, useState } from "react";
import { styled, useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import MuiDrawer from "@mui/material/Drawer";
import MuiAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import CssBaseline from "@mui/material/CssBaseline";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import InnerBar from "./innerBar";
import { TitleContext } from "../../../router/index";
import { Avatar, Badge, Link } from "@mui/material";
import "./sideBar.css";
import NotificationsIcon from "@mui/icons-material/Notifications";
import IMG from "../../../img/tmp/cover.jpg";
import { Stack } from "@mui/system";
import MyToolBar from "../ToolBar/ToolBar";
import { useLocation } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./sideBar.css";
import GotoTop from "../../../components/GotoTop";
import Loading from "../../../components/loading";
const drawerWidth = 240;
const titlename = [
  "我的主页",
  "我的通知",
  "个人设置",
  "我的课程",
  "课程申请",
  "考试申请",
  "考试",
  "考试成绩录入",
  "考试名单",
  "我的申请",
  "我的课程详情",
];
const openedMixin = (theme) => ({
  width: drawerWidth,
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
  }),
  overflowX: "hidden",
});

const closedMixin = (theme) => ({
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  overflowX: "hidden",
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up("sm")]: {
    width: `calc(${theme.spacing(8)} + 1px)`,
  },
});
const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar,
}));

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  backgroundColor: theme.palette.mode == "light" ? "#FFFA" : "#000A",
  backdropFilter: "blur(10px)",
  color: theme.palette.primary.main,
  transition: theme.transitions.create(["width", "margin"], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: (prop) => prop !== "open",
})(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
  whiteSpace: "nowrap",
  boxSizing: "border-box",
  ...(open && {
    ...openedMixin(theme),
    "& .MuiDrawer-paper": openedMixin(theme),
  }),
  ...(!open && {
    ...closedMixin(theme),
    "& .MuiDrawer-paper": closedMixin(theme),
  }),
}));

export default function SideBar(props) {
  const theme = useTheme();
  const [open, setOpen] = useState(true);
  const titleContext = useContext(TitleContext);
  const [open1, setOpen1] = useState(false);
  const location = useLocation();
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };
  const handleClick = () => {
    setOpen1(open1 ? false : true);
  };

  return (
    <div>
      {props.proIsFetching && <Loading />}
      {!props.proIsFetching && (
        <Box sx={{ display: "flex" }}>
          <CssBaseline />
          <AppBar position="fixed" open={open}>
            <MyToolBar title={titlename[titleContext.nowTitle]}>
              <IconButton
                color="inherit"
                aria-label="open drawer"
                onClick={handleDrawerOpen}
                edge="start"
                sx={{
                  marginRight: 5,
                  ...(open && { display: "none" }),
                }}
              >
                <MenuIcon />
              </IconButton>
            </MyToolBar>
          </AppBar>
          <Drawer variant="permanent" open={open}>
            <DrawerHeader>
              <IconButton onClick={handleDrawerClose}>
                {theme.direction === "rtl" ? (
                  <ChevronRightIcon />
                ) : (
                  <ChevronLeftIcon />
                )}
              </IconButton>
            </DrawerHeader>

            <Divider />

            <List>
              <InnerBar
                propen={open}
                title={"个人主页"}
                list={[
                  { name: "我的主页", num: 0, icon: 2 },
                  { name: "个人设置", num: 2, icon: 10 },
                ]}
                icon="0"
              />
            </List>
            <Divider />
            <InnerBar
              propen={open}
              title={"课程"}
              list={[
                { name: "我的课程", num: 3, icon: 7 },
                { name: "课程申请", num: 4, icon: 8 },
                { name: "考试申请", num: 5, icon: 9 },
              ]}
              icon="3"
            />
            {/*分割线*/}
            <Divider />
            <InnerBar
              propen={open}
              title={"课程评价"}
              list={[{ name: "考试", num: 6, icon: 6 }]}
              icon="4"
            />
            <Box sx={{ flexGrow: 1 }}></Box>
            <Box
              sx={{
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                display: open ? "flex" : "none",
              }}
            >
              <Typography fontSize="small">版权所有 © 2022</Typography>
              <Typography fontSize="small">
                <Link
                  target="_blank"
                  href="https://github.com/wxyww2049"
                  underline="none"
                >
                  {"wxyww2049"}
                </Link>
              </Typography>
              <Typography fontSize="small">
                <Link
                  target="_blank"
                  href="https://github.com/zghehejun233"
                  underline="none"
                >
                  {"zghehejun233"}
                </Link>
              </Typography>
              <Typography fontSize="small">
                <Link
                  target="_blank"
                  href="https://github.com/xuinrz"
                  underline="none"
                >
                  {"xuinrz"}
                </Link>
              </Typography>
              <Typography fontSize="small">
                <Link
                  target="_blank"
                  href="https://github.com/WWWZZSS"
                  underline="none"
                >
                  {"WWWZZSS"}
                </Link>
              </Typography>
              <Typography fontSize="small">
                <Link
                  target="_blank"
                  href="https://github.com/xhmlja"
                  underline="none"
                >
                  {"xhmlja"}
                </Link>
              </Typography>
              <Typography
                onClick={() => {
                  window.open("https://beian.miit.gov.cn");
                }}
                sx={{ cursor: "pointer" }}
                fontSize="small"
              >
                鲁ICP备2022034662号
              </Typography>
            </Box>
          </Drawer>
          <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
            <DrawerHeader />
            {props.children}
          </Box>

          <GotoTop />
        </Box>
      )}
    </div>
  );
}
